<template>
    <el-card shadow="never">
        <div slot="header">动态表单(timePicker)</div>
        <DynamicForm :schema="schema" :formData="formData"></DynamicForm>
        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>
    </el-card>
</template>

<script>
import CodeTpl from './md/timePicker.md';

export default {
    components: {
        CodeTpl
    },
    data() {
        return {
            schema: {
                properties: {
                    num1: {
                        label: '任意时间点',
                        widget: 'timePicker',
                        ui: {
                            pickerOptions: {
                                selectableRange: '18:30:00 - 20:30:00'
                            },
                            placeholder: '任意时间点'
                        }
                    },
                    num2: {
                        label: '固定时间点',
                        widget: 'timeSelect',
                        ui: {
                            pickerOptions: {
                                start: '08:30',
                                step: '00:15',
                                end: '18:30',
                                minTime: '09:00'
                            },
                            placeholder: '起始时间'
                        }
                    },
                    num3: {
                        label: '禁用',
                        widget: 'timePicker',
                        ui: {
                            disabled: true
                        }
                    },
                    num4: {
                        label: '只读',
                        widget: 'timePicker',
                        ui: {
                            readonly: true,
                            placeholder: '只读'
                        }
                    },
                    num5: {
                        label: '时间范围',
                        widget: 'timePicker',
                        ui: {
                            isRange: true,
                            rangeSeparator: "至",
                            startPlaceholder: "开始时间",
                            endPlaceholder: "结束时间",
                            placeholder: "选择时间范围",
                            style: 'width: 100%'
                        }
                    }
                },
                ui: {
                    labelWidth: '100px',
                },
                grid: {
                    row: {
                        gutter: 20
                    },
                    col: {
                        span: 8
                    }
                }
            },
            formData: {
                num4: new Date()
            }
        }
    }
}
</script>

<style>

</style>